<template>
  <div class="typeCount">
    <!-- {{issueCount}} -->
    <div class="module">
      <div
        class="situation"
        style="background: rgba(39, 215, 175, 0.1); cursor: pointer"
        @click="goIssues('1')"
      >
        <span class="typeNum" style="color: #27d7af">{{
          issueCount?.waitAssignCount ? issueCount?.waitAssignCount : '0'
        }}</span>
        <span class="type" style="color: #27d7af">超时未分发</span>
      </div>
      <div class="situation" style="background: rgba(251, 111, 93, 0.1)" @click="goIssues('2')">
        <span class="typeNum" style="color: #fb6f5d">
          {{ issueCount?.techniqueNotHandle ? issueCount?.techniqueNotHandle : '0' }}</span
        >
        <span class="type" style="color: #fb6f5d">超时未受理</span>
      </div>
    </div>
    <div class="module">
      <div
        class="situation"
        style="background: rgba(93, 103, 109, 0.1); cursor: pointer"
        @click="goIssues('3')"
      >
        <span class="typeNum" style="color: #5d676d">{{
          issueCount?.techniqueNotPlan ? issueCount?.techniqueNotPlan : '0'
        }}</span>
        <span class="type" style="color: #5d676d"> 超时无解决计划</span>
      </div>
      <div class="situation" @click="goIssues('4')" style="background: rgba(0, 122, 245, 0.1)">
        <span class="typeNum" style="color: #0079f5">{{
          issueCount?.techniqueNotSolve ? issueCount?.techniqueNotSolve : 0
        }}</span>
        <span class="type" style="color: #0079f5">超时未解决</span>
      </div>
    </div>
    <div class="module">
      <div
        class="situation"
        @click="goIssues('5')"
        style="background: rgba(193, 118, 61, 0.1); cursor: pointer"
      >
        <span class="typeNum" style="color: #c1763d">{{
          issueCount?.returnEdit ? issueCount?.returnEdit : '0'
        }}</span>
        <span class="type" style="color: #c1763d">超时未补全</span>
      </div>
      <div
        class="situation"
        @click="goIssues('6')"
        style="background: rgba(141, 34, 254, 0.1); cursor: pointer"
      >
        <span class="typeNum" style="color: #a048ff">
          {{ issueCount?.waitClose ? issueCount?.waitClose : 0 }}</span
        >
        <span class="type" style="color: #a048ff">超时未关闭</span>
      </div>
    </div>
    <div class="module">
      <div
        class="situation"
        @click="goIssues('7')"
        style="background: rgba(255, 187, 55, 0.1); cursor: pointer"
      >
        <span class="typeNum" style="color: rgb(255, 187, 55)">{{
          issueCount?.businessNotSolve ? issueCount?.businessNotSolve : '0'
        }}</span>
        <span class="type" style="color: rgb(255, 187, 55)">超时未复核</span>
      </div>
      <div
        class="situation"
        @click="goIssues('8')"
        style="background: rgba(252, 111, 94, 0.1); cursor: pointer"
      >
        <span class="typeNum" style="color: #fb6f5d">
          {{ issueCount?.businessNotAccept ? issueCount?.businessNotAccept : 0 }}</span
        >
        <span class="type" style="color: #fb6f5d">超时未受理（业务）</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  // import { ElMessage } from 'element-plus';
  import { watch, ref, onMounted } from 'vue'; // reactive,
  import { useRouter } from 'vue-router';
  import { questionStatusCount } from '@/http/api/problem';
  const router = useRouter();
  const props = defineProps({
    //是否为预览模式
    changeTime: {
      type: Number,
      default: 0
    }
  });
  const issueCount = ref('');
  onMounted(() => {
    getStatusCount();
  });
  const getStatusCount = () => {
    questionStatusCount().then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      issueCount.value = res.data.data;
    });
  };
  const goIssues = (num: string) => {
    router.push({
      name: 'Issues',
      params: {
        type: num
      }
    });
  };
  watch(
    () => props.changeTime,
    () => {
      getStatusCount();
    }
  );
</script>

<style scoped lang="less">
  .typeCount {
    height: calc(50% - 37px) !important;
    // width: 65%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .module {
      height: 24%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      border-radius: 8px;
      .situation {
        height: 100%;
        width: 49%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        cursor: pointer;
        .typeNum {
          text-align: center;
          font-size: 18px;
          font-weight: 600;
        }
        .type {
          font-size: 12px;
          font-weight: 400;
          width: 80%;
          text-align: center;
          &.title_long {
            width: 80%;
            // margin: 0 auto;
            // text-overflow: -o-ellipsis-lastline;
            // overflow: hidden;
            // text-overflow: ellipsis;
            // display: -webkit-box;
            // -webkit-line-clamp: 2;
            // -webkit-box-orient: vertical;
            // word-break: break-all;
          }
        }
      }
    }
  }
</style>
